<template>
  <div>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleMenuSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="show" class="el-menu-demo"> 隔离室数据展示界面</el-menu-item>
      <el-menu-item index="echart">病毒含量数据统计</el-menu-item>
      <el-menu-item index="echart1">病人体温数据统计</el-menu-item>
      <el-menu-item index="history1">历史进出数据查询</el-menu-item>
      <el-menu-item index="history2">病人历史体温数据查询</el-menu-item>
      <el-menu-item index="history">历史数据查询</el-menu-item>
      <el-menu-item index="more">更多</el-menu-item>
      <!-- <el-menu-item index="null">暂未开发</el-menu-item> -->
      <!-- <el-menu-item index="login" class="el-menu-demo">更多</el-menu-item> -->
      <el-button type="text" style="height: 60px;  padding-right: 10px  ; color: white;" @click="login">登录</el-button>
    </el-menu>
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
  </div>
</template>

<script>

import deviceView from './deviceView.vue'
import deviceHistory from './deviceHistory.vue'
import deviceEchart from './deviceEchart.vue'
import loginView from './loginView.vue'
export default {
  data() {
    return {
        activeIndex2: '1'
    }
  },
  components: {
    deviceView,
    deviceHistory,
    deviceEchart,
    loginView,
  },
  computed: {
    globalVar() {
      return this.$store.state.globalVar;
    }
  },
  methods: {
    updateGlobalVar(newValue) {
      this.$store.commit('updateGlobalVar', newValue);
    },
    login: function(){
      this.$router.push('/login');
    },
    handleMenuSelect(index) {
      if (index === 'show' ) {
        // 执行首页跳转逻辑，例如使用Vue Router进行页面跳转
        this.$router.push('/show');
      } else if (index === 'echart') {
        // 执行关于页面跳转逻辑
        this.$router.push('/echart');
      } else if (index === 'history') {
        // 执行联系页面跳转逻辑
        this.$router.push('/history');
        
      }else if (index === 'more') {
        // 执行联系页面跳转逻辑
        this.$router.push('/more');
      }else if (index === 'login') {
        // 执行联系页面跳转逻辑
        this.$router.push('/login');
      }else if (index === 'history1') {
        // 执行联系页面跳转逻辑
        this.$router.push('/history1');
        
      }else if (index === 'echart1') {
        // 执行关于页面跳转逻辑
        this.$router.push('/echart1');
      } else if (index === 'history2') {
        // 执行联系页面跳转逻辑
        this.$router.push('/history2');
        
      }
    }
  }
}
</script>



<style>
.el-menu-demo {
  text-align: right;
}
</style>